<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red,
        .box {
            background: red;
            width: 200px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <!-- <div class="haha">哈哈哈</div> -->
    <div class="box ">
        <span>儿子1</span>
    </div>
    <script>
        /*let haha = document.getElementById('haha');
       let box = document.createElement('div');
       box.className = 'red';
       box.style.width = '200px';
       let text = document.createTextNode('123滴滴滴');//创建文本节点
       box.appendChild(text) //把创建的文本节点添加到 box 前面
       document.body.insertBefore(box, haha) //把 haha 放在滴滴前面 
       */

        // ==================================
        let box1 = document.querySelector('.box');
        // 克隆第一份 (深)
        let box2 = box1.cloneNode(true);
        box2.querySelector('span').innerText = '儿子2';
        // 克隆第二份 (浅)
        let box3 = box1.cloneNode(false);

        box3.innerHTML = '<span>儿子3</span>'
        document.body.appendChild(box2);
        document.body.appendChild(box3);

        document.body.removeChild(box2) //删除第二个


    </script>

</body>

</html>